<template lang="html">
    <div class="eventTypeAdd">
        <myHeader>
            <div class="submit">
                <span @click="addEventType">确定</span>
            </div>
        </myHeader>
        <div class="form">
            <x-input title="事件名字" placeholder="请输入事件名称" v-model="formInfo.name">
                <img slot="label" :src="design" style="padding-right: 10px;" alt="" width="24" height="24" />
            </x-input>
            <x-input title="RBG值" placeholder="请输入RBG值" v-model="formInfo.rgb">
                <img slot="label" :src="electric" style="padding-right: 10px;" alt="" width="24" height="24" />
                <div slot="right-full-height" class="show-rgb" :style="{background: bgColor}"></div>
            </x-input>
        </div>
    </div>
</template>

<script>
import myHeader from '@/components/base/myHeader'
import { XInput } from 'vux'
export default {
    data(){
        return {
            formInfo: {},
            design: require('@/common/images/design-tools.png'),
            electric: require('@/common/images/electric.png'),
        }
    },
    computed: {
        bgColor(){
            if (this.formInfo.rgb && this.formInfo.rgb.length === 6) {
                return '#' + this.formInfo.rgb
            }else{
                return ''
            }
        }
    },
    components: {
        myHeader,
        XInput
    },
    created(){
        if (this.$route.query.id) {
            this.$api.get('/event/detail', {
                id: this.$route.query.id
            }).then(res => {
                this.formInfo = res
            })
        }
    },
    methods: {
        addEventType(){
            let alertMsg = '添加成功！'
            if (this.$route.query.id) {
                alertMsg = '修改成功！'
            }
            this.$api.post('/event/add', this.formInfo).then(res => {
                this.$vux.toast.show({text: '添加成功！'})
                this.$router.go(-1)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .eventTypeAdd{
        .show-rgb{
            width: .25rem;
            height: .25rem;
            margin-right: .2rem;
            margin-top: .1rem;
        }
        .submit{
            font-size: .16rem;
            text-align: right;
            padding-right: .1rem;
        }
    }
</style>
